// src/components/sponsorDashboard/mainContent/DashboardTabs.tsx

import { GrOverview } from "react-icons/gr";
import { FaTable } from "react-icons/fa";
import { CiSearch } from "react-icons/ci";
import type { FC } from "react";
import { useState, useEffect } from "react";
import { MdFilterAlt } from "react-icons/md";
import { useDashboardTabStore } from '@/store/dashboardTabStore';

interface DashboardTabsProps {
  onFilterClick?: () => void;
  searchText: string;
  setSearchText: (text: string) => void;
  onSearchClick: () => void;
}

const DashboardTabs: FC<DashboardTabsProps> = ({
  onFilterClick,
  searchText,
  setSearchText,
  onSearchClick,
}) => {
  const [searchPlaceholder, setSearchPlaceholder] = useState<string>("");

  const { currentTab, setTab } = useDashboardTabStore();

  useEffect(() => {
    function handleResize() {
      if (window.innerWidth >= 1024) {
        setSearchPlaceholder("Search by company name, company code, program, or faculty...");
      } else {
        setSearchPlaceholder("Search...");
      }
    }
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div className="w-full flex flex-col gap-4 px-4 py-2 font-poppins">
      {/* Tabs */}
      <div className="flex gap-2 sm:gap-6 border-b border-gray-200 dark:border-slate-800 text-xs sm:text-base overflow-x-auto scrollbar-thin scrollbar-thumb-gray-200 pb-2">
        <button
          onClick={() => setTab("overview")}
          className={`flex items-center gap-2 px-3 sm:px-4 py-2.5 rounded-xl transition-all duration-200 whitespace-nowrap font-medium
            ${currentTab === "overview"
              ? "bg-blue-100 dark:bg-slate-800 text-blue-700 dark:text-cyan-300 font-semibold shadow-sm border border-blue-200 dark:border-slate-700"
              : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-800 hover:text-blue-700 dark:hover:text-cyan-300 border border-transparent"}
          `}
        >
          <GrOverview size={18} />
          <span className="hidden lg:inline">Overview</span>
        </button>
        <button
          onClick={() => setTab("table")}
          className={`flex items-center gap-2 px-3 sm:px-4 py-2.5 rounded-xl transition-all duration-200 whitespace-nowrap font-medium
            ${currentTab === "table"
              ? "bg-blue-100 dark:bg-slate-800 text-blue-700 dark:text-cyan-300 font-semibold shadow-sm border border-blue-200 dark:border-slate-700"
              : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-800 hover:text-blue-700 dark:hover:text-cyan-300 border border-transparent"}
          `}
        >
          <FaTable size={16} />
          <span className="hidden lg:inline">Table</span>
        </button>
      </div>

      {currentTab === "table" && (
        <div className="w-full flex flex-col items-stretch">
          <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-lg border border-gray-200 dark:border-slate-700 px-4 sm:px-6 py-4 flex flex-row flex-nowrap items-center gap-3 w-full overflow-x-auto transition-all duration-300">
            {/* Search bar + button group */}
            <div className="flex-1 min-w-0">
              <div className="relative w-full">
                <span className="absolute inset-y-0 left-4 flex items-center text-gray-400 dark:text-gray-500">
                  <CiSearch size={18} />
                </span>
                <input
                  type="text"
                  value={searchText}
                  onChange={(e) => setSearchText(e.target.value)}
                  placeholder={searchPlaceholder}
                  className="pl-12 pr-4 py-2.5 w-full rounded-xl border border-gray-300 dark:border-slate-700 text-sm text-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-slate-800 hover:bg-white dark:hover:bg-slate-700 focus:bg-white dark:focus:bg-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition-all duration-200 truncate"
                />
              </div>
            </div>
            <div className="flex gap-2 flex-shrink-0">
              <button
                onClick={onSearchClick}
                className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-blue-600 dark:bg-cyan-700 text-white text-sm font-medium hover:bg-blue-700 dark:hover:bg-cyan-800 hover:shadow-md transition-all duration-200 shadow-sm truncate"
              >
                <CiSearch size={16} />
                <span className="hidden lg:inline">Search</span>
              </button>
              <button
                onClick={onFilterClick}
                className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-blue-400 dark:border-cyan-700 bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-cyan-300 text-sm font-medium hover:bg-blue-100 dark:hover:bg-slate-700 hover:shadow-sm transition-all duration-200 shadow-sm truncate"
              >
                <MdFilterAlt className="text-blue-500 dark:text-cyan-400" size={16} />
                <span className="hidden lg:inline">Filters</span>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default DashboardTabs;